<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, initial-scale=1, shrink-to-fit=no">
    <div th:replace="~{admin/common :: common-link}"></div>
    <style>
        span {
            display: inline-block;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            max-width: 500px;
        }
        .btn {
            position: absolute;
            top: -6px;
        }
        img {
            object-fit: cover;
        }
    </style>
</head>
<body>

<div class="content">
   <div class="block block-fx-shadow">
            <div class="block-content">
                <div class="row justify-content-center py-20">
                    <div class="col-xl-12" th:object="${vo}">
                        <div class="form-group row">
                            <div class="col-lg-2 col-md-2 col-xs-2">预览图</div>
                            <div class="col-lg-10 col-md-10 col-xs-10">
                                <img th:src="@{*{thumbnailUrl}}" width="400" height="150" alt="">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2 col-md-2 col-xs-2">文件名</div>
                            <div class="col-lg-10 col-md-10 col-xs-10">
                                <span id="filename" th:text="*{filename}"></span>&nbsp;<button class="btn" title="复制" data-clipboard-target="#filename"><i class="fa fa-copy"></i></button>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2 col-md-2 col-xs-2">原始名称</div>
                            <div class="col-lg-10 col-md-10 col-xs-10">
                                <span id="originalName" th:text="*{originalName}"></span>&nbsp;<button class="btn" title="复制" data-clipboard-target="#originalName"><i class="fa fa-copy"></i></button>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2 col-md-2 col-xs-2">本地路径</div>
                            <div class="col-lg-10 col-md-10 col-xs-10">
                                <span id="filePath" th:text="*{filePath}"></span>&nbsp;<button class="btn" title="复制" data-clipboard-target="#filePath" th:if="*{#strings.isEmpty(filePath) == false}"><i class="fa fa-copy"></i></button>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2 col-md-2 col-xs-2">访问链接</div>
                            <div class="col-lg-10 col-md-10 col-xs-10">
                                <span id="fileUrl" th:text="*{fileUrl}"></span>&nbsp;<button class="btn" title="复制" data-clipboard-target="#fileUrl"><i class="fa fa-copy"></i></button>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2 col-md-2 col-xs-2">内容类型</div>
                            <div class="col-lg-10 col-md-10 col-xs-10">
                                <span th:text="*{contentType}"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2 col-md-2 col-xs-2">文件大小</div>
                            <div class="col-lg-10 col-md-10 col-xs-10">
                                <span th:text="*{fileSizeInfo}"></span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2 col-md-2 col-xs-2">存储位置</div>
                            <div class="col-lg-10 col-md-10 col-xs-10">
                                <span th:if="*{position == 1}">本地</span>
                                <span th:if="*{position == 2}">七牛云</span>
                                <span th:if="*{position == 3}">OSS</span>
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-lg-2 col-md-2 col-xs-2">上传时间</div>
                            <div class="col-lg-10 col-md-10 col-xs-10">
                                <span th:text="*{#dates.format(uploadTime, 'yyyy年MM月dd日 HH:mm:ss')}"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>
<div th:replace="~{admin/common :: common-script}"></div>
<script th:src="@{'/admin/assets/js/plugins/clipboard/clipboard.min.js'}"></script>
<script type="text/javascript" th:inline="javascript">
    $(function () {
        let clipboard = new ClipboardJS('.btn');
        clipboard.on('success', function(e) {
            layer.msg("复制成功");
            e.clearSelection();
        });
    })
</script>
</body>
</html>